<script lang="tsx">
import { defineComponent, Transition, resolveDynamicComponent } from "vue"

export default defineComponent({
	name: "App",
	setup() {
		return () => (
			<div class="app">
				<h1 class="title">ChenUI 组件展示</h1>
				<nav class="nav">
					<router-link to="/">Icon</router-link>
					<router-link to="/button">button</router-link>
					<router-link to="/card">card</router-link>
					<router-link to="/dialog">dialog</router-link>
					<router-link to="/collapse">collapse</router-link>
					<router-link to="/pager">pager</router-link>
					<router-link to="/tooltip">tooltip</router-link>
				</nav>
				<div class="displayArea">
					<router-view>
						{{
							default: ({ Component: CustomComponent }: { Component: any }) => {
								const ResolvedComponent = resolveDynamicComponent(CustomComponent) as any
								return (
									<Transition name="fade" mode="out-in">
										<ResolvedComponent />
									</Transition>
								)
							},
						}}
					</router-view>
				</div>
			</div>
		)
	},
})
</script>
<style scoped lang="less">
h1.title {
	text-align: center;
	font-weight: 200;
	font-size: var(--chen-font-size-extra-large);
	margin: 1em 0;
}

.nav {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	a {
		padding: 3px;
		height: 30px;
	}
}

.displayArea {
	margin-top: 2em;
}

.active {
	transition: all 0.1s;
	color: green;
	border-bottom: 3px solid green;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
	opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s ease; /*ease*/
}
</style>
